<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎登录!</title>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.4/moment.min.js"></script>
    <link href="https://cdn.bootcss.com/antd/3.0.3/antd.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/antd/3.0.3/antd.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
    <style>
        .logo {
            height: 32px;
            background: rgba(255,255,255,.2);
            margin: 16px;
        }
    </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    var mountNode = document.getElementById('root');
    const { Layout, Menu, Icon } = antd;
    const { Header, Sider, Content } = Layout;

    class SiderDemo extends React.Component {
        state = {
            collapsed: false,
        };
        toggle = () => {
            this.setState({
                collapsed: !this.state.collapsed,
            });
        }
        render() {
            return (
                <Layout>
                    <Sider
                        trigger={null}
                        collapsible
                        collapsed={this.state.collapsed}
                    >
                        <div class="logo">桥康智能</div>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">
                                <Icon type="user" />
                                <span>nav 1</span>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Icon type="video-camera" />
                                <span>nav 2</span>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Icon type="upload" />
                                <span>nav 3</span>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{ background: '#fff', paddingLeft: 24 }}>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                onClick={this.toggle}
                            />
                        </Header>
                        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 580 }}>
                            Content
                        </Content>
                    </Layout>
                </Layout>
            );
        }
    }

    ReactDOM.render(<SiderDemo />, mountNode);
</script>
</body>
</html>